<div class="pageContent">
     <div id="toolbar1" class="btn-group mr1" role="group" aria-label="Basic example">
      <!-- <button type="button" class="btn btn-primary btn-lg" onclick="process_list_adds()" >添加</button> -->
      <button type="button" class="btn btn-success" onclick="process_list_adds()" title="添加"><i class="glyphicon glyphicon-plus"></i></button>

      <button type="button" class="btn btn-violet" onclick="saveProcessTable1()" title="保存"><i class="glyphicon glyphicon-disk"></i></button>
    </div>
    <table id="ProcessDetailTable" class="col-xs-8 col-md-6 grid"></table>
 </div>
<script type="text/javascript">
	var rowData =[] ;
  var processFlag = false ;
  $(function () {
      var  rows =[];
      //1.初始化Table
      var oTable = new TableInit();
      oTable.Init();
      var orderId= "{{orderId}}";
    $('.content-container').find("div.fixed-table-pagination").remove();
    var fixHelperModified = function(e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function(index) {
          $(this).width($originals.eq(index).width())
      });
      return $helper;
    },
   
    updateIndex = function(e, ui) {
         processFlag = true;
         rows.splice(0);   //清空数组
          var i = 1;
          $(ui.item.parent()).find("tr").each(function(){
               var  aa={}; 
                aa.sort=i++;
                // aa.sort =$(this).children().eq(0).text();
                aa.id=$(this).children().eq(0).text();
                aa.name=$(this).children().eq(1).text();
                aa.demo=$(this).children().eq(2).text();
                aa.createDate=$(this).children().eq(3).text();
                aa.parameter=$(this).children().eq(4).text();
                rows.push(aa);

          })
          $('td.index', ui.item.parent()).each(function(i){
              $(this).html(i + 1);
          });
          rowData = rows;
    };

    $("#ProcessDetailTable tbody").sortable({
        helper: fixHelperModified,
        stop: updateIndex
    }).disableSelection();
     
 });	

var detailflag = false;
var editFlag = false;
var processDetailTag = false ;
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#ProcessDetailTable').bootstrapTable({
            url: '/order/orderProcessList',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar1',                //工具增删改按钮用哪个容器
            toolbarAlign:'left',
            // searchAlign:'left',
            buttonsAlign:'left',
            striped: false,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.DetailqueryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            // search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，没意义
            contentType: "application/x-www-form-urlencoded",
            // strictSearch: true,                 //启用严格搜索
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "no",                     //每一行的唯一标识，一般为主键列
            //showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            //showHeader:true,
            //showPaginationSwitch:true,
            buttonsToolba:'#buttons-toolbar', 
            columns: [
            {
                field: 'sort',
                title: '序号',
                sortable:true,
                formatter:xuhao
            },
            {
                field: 'id',
                title: 'id',
                visible:false
            },
            {
                field: 'name',
                title: '工序名称'
            },
            {
                field: 'demo',
                title: '文件名'
            },
            {
                field: 'createDate',
                title: '更新时间'
            },
            {
                field: 'parameter',
                title: '参数',
                formatter:paramsMatter,
                width:500,
                align:'left'
            },
            {
                field: 'processSchemeId',
                title: '工序id',
                visible:false
            },
            {
                field: 'operate',
                title: '操作',
                width:150,
                formatter: operateFormatter1 //自定义方法，添加操作按钮
            },
            ],
            onClickCell:function(field,value,row,$element,event){
          if (field == "operate" && processDetailTag!=true) { //操作栏并且不是查看详情
            // debugger
            // console.log(event);
            // console.log(field);
            // console.log(row);
            // console.log($element);
             var  idLocation = $($element[0]).find("a:first").attr("id");
             var serial = $($element[0]).parent().find("td:first").text();
             var eventId = parseInt(idLocation)+1;  
             var eventIdLocation = parseInt(idLocation); //
              if (detailflag ==false) {
                 processFlag = true
                  var idData ;
                        var id =row.id;
                        var data= $("#ProcessDetailTable").bootstrapTable('getData');
                      
                        for(var i=0;i<data.length;i++){
                            if(id==data[i].id){
                            idData =data[i]; 
                             if(data[i].parameter){
                             data[i].parameter= data[i].parameter.replace(/\r\n/g, 'br').replace(/\n/g, '<br/>').replace(/\s/g, ' ');//先转化下换行符到br
                            }
                           }
                        }
                       if(serial ==eventId){  //刚添加完没有id的 还要根据serial定位
                             if(data[eventIdLocation].parameter){
                              data[eventIdLocation].parameter= data[eventIdLocation].parameter.replace(/\r\n/g, 'br').replace(/\n/g, '<br/>').replace(/\s/g, ' ');//先转化下换行符到br
                            idData =data[eventIdLocation]; 
                            }
                          }
                           idData.orderId = '{{orderId}}';   //用订单id替换作为controllersn的条件
                            idData.serial=serial;
                        editFlag =true;
                            Ewin.dialog({
                              id:'processListSnEdit',
                              url:'/process/processListSn/edit',
                              title:'编辑工序',
                              width:800,
                              height:600,
                              data:idData
                          })
               }
             }else{
                if ($element[0].style.width=="500px") {
                         if(value){
                         var ss = value.replace(/br/g, '\r\n').replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
                         //添加第一个replace替代添加编辑点击操作的关闭导致替代成了br没有替换回来
                        $element.css('width','501px');
                        $element.html(ss);
                         return false;
                       }
               }else if($element[0].style.width=="501px") {
                        if(value){
                       ss =  value.replace(/br/g, '\r\n'); //转换传过来的一条数据
                       var cellData = ss.substring(0,50)+"...";    
                       $element.css('width','500px'); //还原
                       $element.html(cellData);
                        return false;
                      }
               }
             }
            },
            onReorderRowsDrag: function (table, row) {
               //取索引号
               dragbeforeidx = $(row).attr("data-index");
            },
            onReorderRowsDrop: function (table, row) {
               //取索引号
               draglateridx = $(row).attr("data-index");
            },
             onReorderRow: function (newData) {
                 $.each(newData,function(i,item){
                })
            }
        });
    };
    //得到查询的参数
    oTableInit.DetailqueryParams = function (params) {
        var order = {};
        order.orderId = '{{orderId}}';
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
           pageSize: params.limit,   //页面大小
           pageCurrent:params.offset,  //页码
        };
       return $.extend({},temp,order);
    };
    return oTableInit;
};

function paramsMatter(value,row,index){
        var values= row.parameter;
        var ss = values;//用于截取后显示
       if (values) {
        if(values.length>50){
           //转换格式
            ss  = values.substring(0,50)+"...";
        }
        return ss;
      }
}

function operateFormatter1(value, row, index) {//赋予的参数
    return [
        '<div class="buttonGroup"><a class="btn active editButton"  id="'+index+'"  title="编辑工序" ><i class="glyphicon glyphicon-edit"></i>编辑</a><a class="btn active delButton"  onclick="processDelete(event,\''+row.id+'\')" title="删除工序" ><i class="glyphicon glyphicon-remove"></i>删除</a><a class="btn active editButton"  title="查看当前工序的所有生产详情" onclick="processDetail(event,\''+row.id+'\')" style="background-color: #4cb6cb;"><i class="fa fa-eye"></i>生产详情</a></div>'   
    ].join('');
}
function xuhao(value, row, index) {//赋予的参数
    if(row.sort){   //刚保存过的存在sort
          return [
            '<a class="btn active"  >'+row.sort+'</a>' 
        ].join('');
    }else{
          return [
            '<a class="btn active"  >'+(index+1)+'</a>' 
        ].join('');  
    }
    
}
function process_list_adds(){
  processFlag = true;
  var s = $("#ProcessDetailTable").bootstrapTable('getData'); //加sort
  var sort = s.length+1;
    Ewin.dialog({
        id:'myModal',
        url:'/process/processListSn/Add',
        title:'添加工序',
        width:600,
        height:240,
        data:{"sort":sort,"processSchemeId":"{{processSchemeId}}"}
    })
}

function  processDelete(event,id){
  processFlag = true;
  detailflag = true;
    var editOnce = setTimeout(function(){  //两秒后detailflag重新变为false
        detailflag = false ;
        clearTimeout(editOnce);
      },2000);

    var data = $("#ProcessDetailTable").bootstrapTable('getData');
    for(var i=0;i<data.length;i++){
           if(id==data[i].id){
             data.splice(i,1);
             continue;
           }
     }
      $(event.target).parent().parent().parent().remove();
      // toastr.success(result.message+'!');
} 
//查看当前工序的生产详情   点击标识符 detailTag
function processDetail(event , id){
  // debugger
     processDetailTag = true ;
    //  $('.content-container').ajaxUrl({'url':'/order/orderDetails','data':{'orderId':id,"search":$("#orderSearch").getFormData()}});  
     $('.content-container').ajaxUrl({'url':'/process/detailPage','data':{'orderId':id}}); 
}
function saveProcessTable1(){               //点击提交表格数据  row？？？？
  if (processFlag ==true) {
        processFlag =false ;
        var s = $("#ProcessDetailTable").bootstrapTable('getData'); //加sort
        for(var i=0;i<s.length;i++){
              if(s[i].parameter){
                   s[i].parameter  = s[i].parameter.replace(/br/g, '\r\n');
              }
        }
        for(var i=0;i<rowData.length;i++){
              if(rowData[i].parameter){
                  rowData[i].parameter  = rowData[i].parameter.replace(/br/g, '\r\n');
              }
        }
        if(rowData.length==0){     //不移动不存在 和编辑前没有移动
                $.post("/order/saveProcessList",
                      {orderId:'{{orderId}}', processList: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
                      function(data) {
                      if (data.statusCode == 200) {
                        bsConfirm("<div><p>保存成功!</p><p>是否更新到控制器？</p></div>",order_list_controlConform,0,$("#ProcessTable1").bootstrapTable('refresh'));
                             
                        // Ewin.confirm({ message: "<div><p>保存成功!</p><p>是否更新到控制器？</p></div>" }).on(function (e) {
                            //     if (!e) { //点击否就关闭当前页面
                            //         return;
                            //     }else{    //确定之后执行执行开始操作
                            //       order_list_controlConform(0)
                            //     }
                            //     $("#ProcessTable1").bootstrapTable('refresh',{url:"/process/processList",silent:true,query:{
                            //     type:1,
                            //     level:2
                            //     }});   
                            // });
                      }else{
                          toastr.warning(data.message+'!');
                      }
                });
        }else{ 
            if(s.length==rowData.length){    
                      for(var i=0;i<s.length;i++){            //移动后由于再列表加载显示一遍变成50字符，需要将原来的parameter参数替换
                        for(var j=0;j<rowData.length;j++){
                                rowData[j].processSchemeId =s[i].processSchemeId
                                    if (!s[i].parameter=="") {
                                            if(s[i].name==rowData[j].name){
                                              if (s[i].parameter) {
                                                rowData[j].parameter =s[i].parameter
                                              }
                                            }
                                    }
                          }
                      }
                    if(editFlag==true){ //识别编辑操作的标识符       
                        editFlag = false;//移动时和移动后编辑
                        $.post("/order/saveProcessList",
                            {orderId:'{{orderId}}', processList: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
                            function(data) { 
                                if (data.statusCode == 200) {
                                       bsConfirm("<div><p>保存成功!</p><p>是否更新到控制器？</p></div>",order_list_controlConform,0,$("#ProcessTable1").bootstrapTable('refresh'));
                                }else{
                                  toastr.warning(data.message+'!');
                                }
                           });
                  }else{
                        $.post("/order/saveProcessList",
                            {orderId:'{{orderId}}', processList: JSON.stringify(rowData)},//将整张表数据Post，当然，先序列化成Json
                            function(data) {
                                if (data.statusCode == 200) {
                                       bsConfirm("<div><p>保存成功!</p><p>是否更新到控制器？</p></div>",order_list_controlConform,0,$("#ProcessTable1").bootstrapTable('refresh'));
                                }else{
                                  toastr.warning(data.message+'!');
                                }
                        });
                  }
            }else{ //不一样说明执行了删除操作，专门处理删除操作
                  //移动时存在
                  $.post("/order/saveProcessList",
                  {orderId:'{{orderId}}', processList: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
                      function(data) {
                          if (data.statusCode == 200) {
                                    bsConfirm("<div><p>保存成功!</p><p>是否更新到控制器？</p></div>",order_list_controlConform,0,$("#ProcessTable1").bootstrapTable('refresh'));
                          }else{
                            toastr.warning(data.message+'!');
                          }
                });
            }
        }
  }else{
       toastr.success("保存成功！"); //手动添加提醒
       return false;
  }
}

function order_list_controlConform(num){
        $.ajax({
            url:'/order/operateOrder',
            type:'post',
            data:{'orderId':'{{orderId}}','operate':num },
            dataType:'json',
            success:function(json){
                //  console.log(json);
                if(json.statusCode == '200'){
                    toastr.success(json.message);
                }else{            //300情况下
                    toastr.error(json.message);
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                toastr.error(textStatus+'!');
            }
        })
}
</script>